<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/logo.jpg">
        <span >我的博客系统</span>
        <!-- 空白元素，用来占位置 -->
         <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 表示整个用户信息区 -->
            <div class="card">
                <img src="image/dog.jpg" alt="">
                <h3>小韩同学</h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>

        </div>
        <!-- 右侧内容详情 -->
        <div class="right">
            <!-- 用这个div来包裹整个博客的内容详情 -->
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 时间 -->
                <div class="data">2022-5-31</div>
                <!-- 正文 -->
                <p>aaaa  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi nobis quae magni adipisci earum voluptates, laborum magnam sequi consectetur, cupiditate non neque sed ullam commodi nulla atque illum delectus cumque.</p>
                <p>bbb Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod molestias architecto optio itaque inventore dignissimos. Earum ducimus voluptate, adipisci officia porro, quasi, accusantium reprehenderit quod numquam rem nulla. Et, non.</p>
                <p>ccc Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores illum esse architecto ea, commodi aliquid ut libero asperiores nam voluptas voluptatibus nesciunt alias error voluptatem qui maxime, perspiciatis aut ipsam!</p>
                <p>ccc Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores illum esse architecto ea, commodi aliquid ut libero asperiores nam voluptas voluptatibus nesciunt alias error voluptatem qui maxime, perspiciatis aut ipsam!</p>
                <p>ccc Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores illum esse architecto ea, commodi aliquid ut libero asperiores nam voluptas voluptatibus nesciunt alias error voluptatem qui maxime, perspiciatis aut ipsam!</p>
                <p>ccc Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores illum esse architecto ea, commodi aliquid ut libero asperiores nam voluptas voluptatibus nesciunt alias error voluptatem qui maxime, perspiciatis aut ipsam!</p>
                <p>ccc Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores illum esse architecto ea, commodi aliquid ut libero asperiores nam voluptas voluptatibus nesciunt alias error voluptatem qui maxime, perspiciatis aut ipsam!</p>
                <p>ccc Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores illum esse architecto ea, commodi aliquid ut libero asperiores nam voluptas voluptatibus nesciunt alias error voluptatem qui maxime, perspiciatis aut ipsam!</p>
                <p>ccc Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores illum esse architecto ea, commodi aliquid ut libero asperiores nam voluptas voluptatibus nesciunt alias error voluptatem qui maxime, perspiciatis aut ipsam!</p>
                

            </div>
        
        </div>
    </div>
    
</body>
</html>